<template>
	<div>
		<div class="madp-btn-group">
			<el-button-group v-if="btnList && btnList.length > 0">
				<el-button :type="curType === item.value ? 'primary' : ''" v-for="item in btnList" :key="item.value" @click="changeType(item.value)">{{ item.label }}</el-button>
			</el-button-group>
		</div>
		<div>
			<el-form :inline="true" class="madp-chart-form">
				<div>
					<el-form-item>
						<el-select class="madp-date-select" v-model="dateType" placeholder="自定义" @change="changeDateType">
							<el-option v-for="item in dateTypes" :key="item.type" :label="item.label" :value="item.type"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自定义:">
						<el-date-picker
							v-model="dateRange"
							@change="changeDateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							:picker-options="{
								disabledDate(time) {
									return time.getTime() > Date.now();
								},
							}"
						></el-date-picker>
					</el-form-item>
				</div>
				<div>
					<el-form-item>
						<el-button plain @click="reset">重置</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
	props: ['form', 'curDeptId'],
	data() {
		return {
			btnList: [],
			curType: '',
			dateTypes: [
				{
					type: 0,
					label: '昨日',
				},
				{
					type: 1,
					label: '近三天',
				},
				{
					type: 2,
					label: '近一周',
				},
				{
					type: 3,
					label: '近一个月',
				},
			],
			dateRange: [],
			dateType: 1,
		};
	},
	watch: {
		form: {
			handler(val) {
				if (!val) return;
				this.btnList = JSON.parse(JSON.stringify(val));
				if (this.btnList && this.btnList[0]) {
					this.curType = this.btnList[0].value;
				}
			},
			immediate: true,
		},
		curDeptId: {
			handler() {
				this.reset();
			},
		},
	},
	created() {
		this.changeDateType();
	},
	methods: {
		changeType(data) {
			this.curType = data;
			this.toEmit();
		},
		changeDateType() {
			let startDate = new Date(),
				endDate = new Date(),
				time = [];
			if (this.dateType === 0) {
				startDate.setTime(new Date().getTime() - 3600 * 1000 * 24 * 1);
				endDate = startDate;
			} else if (this.dateType === 1) {
				startDate.setTime(new Date().getTime() - 3600 * 1000 * 24 * 2);
			} else if (this.dateType === 2) {
				startDate.setTime(new Date().getTime() - 3600 * 1000 * 24 * 6);
			} else if (this.dateType === 3) {
				startDate.setTime(new Date().getTime() - 3600 * 1000 * 24 * 29);
			}
			time = [startDate, endDate];
			let res = [this.formatDate(time[0]), this.formatDate(time[1])];
			this.dateRange = res;
			this.toEmit();
		},
		changeDateRange() {
			this.dateType = '';
			this.toEmit();
		},
		formatDate(val) {
			let time = new Date(val);
			let y = time.getUTCFullYear();
			let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
			let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();

			return y + '-' + m + '-' + d;
		},
		reset() {
			if (this.btnList && this.btnList[0]) {
				this.curType = this.btnList[0].value;
			}
			this.dateType = 1;
			let startDate = new Date(),
				endDate = new Date();
			startDate.setTime(new Date().getTime() - 3600 * 1000 * 24 * 2);
			this.dateRange = [this.formatDate(startDate), this.formatDate(endDate)];
			this.toEmit();
		},
		toEmit() {
			if (!this.dateRange) return;
			let obj = {
				startTime: this.dateRange[0],
				endTime: this.dateRange[1],
				type: this.curType,
				deptId: this.curDeptId,
			};
			if (obj.deptId && obj.deptId != '') {
				this.$emit('changeViews', obj);
			}
		},
		getTime() {
			let obj = {
				startTime: this.dateRange[0],
				endTime: this.dateRange[1],
			};
			return obj;
		},
	},
};
</script>
<style scoped>
.madp-btn-group {
	margin-bottom: 15px;
}
.madp-chart-form {
	display: flex;
	justify-content: space-between;
}
</style>
